<template>
  <div class="register-container">
    <h1>注册</h1>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="username">用户名</label>
        <input v-model="form.username" type="text" id="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input v-model="form.password" type="password" id="password" required />
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input v-model="form.email" type="email" id="email" required />
      </div>
      <div class="form-group">
        <label for="code">验证码</label>
        <input v-model="form.code" type="text" id="code" required />
      </div>
      <div class="form-group">
        <label for="avatar">头像</label>
        <input v-model="form.avatar" type="text" id="avatar" required />
      </div>
      <div class="form-group">
        <label for="gender">性别</label>
        <select v-model="form.gender" id="gender" required>
          <option value="M">男</option>
          <option value="F">女</option>
          <option value="OTHER">其他</option>
        </select>
      </div>
      <button type="submit">注册</button>
    </form>
    <p>已有账号？<router-link to="/login">登录</router-link></p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import services from '@/services'
import type { RegisterForm } from '@/services/account/account.types'

const router = useRouter()
const form = ref<RegisterForm>({
  username: '',
  password: '',
  email: '',
  code: '',
  avatar: '',
  gender: 'M',
})

const handleRegister = async () => {
  try {
    await services.account.register(form.value)
    alert('注册成功，请登录')
    router.push('/login') // 注册成功后跳转到登录页面
  } catch (error) {
    console.error('注册失败:', error)
    alert('注册失败，请检查输入信息')
  }
}
</script>

<style scoped>
.register-container {
  @apply max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md;
}

h1 {
  @apply text-2xl font-bold text-center mb-6;
}

.form-group {
  @apply mb-4;
}

label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

input,
select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
}

button {
  @apply w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

p {
  @apply text-center mt-4;
}

a {
  @apply text-blue-500 hover:underline;
}
</style>
